<template>
<div class="body">
  <page-aside icon="icon-wenzhentijian" title="智能导诊自查" desc="输入症状，我们将为您快速提供可能的疾病诊断，帮助您及时采取措施。">

  </page-aside>
  <main class="page__main">
    <!-- 问诊步骤条 -->
    <el-steps :active="activeStep" finish-status="success" simple class="steps-card">
      <el-step v-for="step in stepsList" :key="step.id" :title="step.name" />
    </el-steps>
    <!-- 患者交互区域 -->
     <component :is="stepsList[activeStep].component" @nextStep="activeStep++" @prevStep="activeStep--" >
     </component>
  </main>
</div>
</template>

<script setup>
import { ref } from 'vue'
import { usePatientStore } from '../store/patient'
import PageAside from '../components/PageAside.vue'
import PatientInfo from '../components/self-check/PatientInfo.vue'
import ChiefComplaint from '../components/self-check/ChiefComplaint.vue'
import CheckResult from '../components/self-check/CheckResult.vue'

const patientStore = usePatientStore();
const activeStep = ref(0); // 当前步骤
const stepsList = [
  {
    id: 0,
    name: '信息采集',
    component: PatientInfo
  },
  {
    id: 1,
    name: '患者主诉',
    component: ChiefComplaint
  },
  {
    id: 2,
    name: '查看结果',
    component: CheckResult
  }
]
</script>

<style lang="scss" scoped>
$symptom-updownbtn-bg: #dd4444;
$symptom-updownbtn-bg-disabled: #ddd;
$symptom-tags-bg: #f5f5f5;

.body {
  display: flex;
  height: 95vh;
}

.page__main {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1rem;
  box-sizing: border-box;
}

.steps-card {
  margin-bottom: 1rem;
}
</style>